<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../../js/plugins/layui-v2.4.5/layui/css/layui.css" />
		<link rel="stylesheet" href="../../css/reset.css" />
		<link rel="stylesheet" href="../../css/list.css" />
	</head>
	<body class="p10">
		<div class="container p15">
			<div class="layui-form search-container">
				<div class="layui-inline">
					<label class="layui-form-label">巡检计划名称</label>
					<div class="layui-input-inline">
						<input type="text" class="layui-input" autocomplete="off" placeholder="请输入" id="titleInput">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">巡检位置</label>
					<div class="layui-input-inline">
						<select name="type" lay-verify="" >
						  <option value="">请选择</option>
						  <option value="0">信息中心</option>
						  <option value="其它">其它</option>
						</select> 
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">巡检情况</label>
					<div class="layui-input-inline">
						<select name="type" lay-verify="" >
						  <option value="">请选择</option>
						  <option value="0">在用</option>
						  <option value="1">待废</option>
						</select> 
					</div>
				</div>
				<a href="javascript:;" class="layui-btn layui-btn-sm"><i class="layui-icon layui-icon-search"></i>查询</a>
			</div>
			<div class="btn-container"><a href="javascript:;" id="addBtn" class="layui-btn layui-btn-sm">添加</a></div>
			<table id="list" lay-filter="list"></table>
		</div>
		<script src="../../js/jquery-3.3.1.min.js"></script>
		<script src="../../js/plugins/layui-v2.4.5/layui/layui.js"></script>
		<script>
			var data = [{
					id: 1,
					name: '网络机房巡检',
					cycle: '2小时',
					startTime: '2019.1.1 0:00',
					endTime: '2019.1.1 2:00',
					position:'网络机房',
					manager:'张强、李艾',
					state:2
				},{
					id: 2,
					name: '网络机房巡检',
					cycle: '2小时',
					startTime: '2019.1.1 2:00',
					endTime: '2019.1.1 4:00',
					position:'网络机房',
					manager:'张强、李艾',
					state:1
				},{
					id: 3,
					name: '网络机房巡检',
					cycle: '2小时',
					startTime: '2019.1.1 4:00',
					endTime: '2019.1.1 6:00',
					position:'网络机房',
					manager:'张强、李艾',
					state:0
				},{
					id: 4,
					name: '网络机房巡检',
					cycle: '2小时',
					startTime: '2019.1.1 6:00',
					endTime: '2019.1.1 8:00',
					position:'网络机房',
					manager:'张强、李艾',
					state:0
				}
			];
			layui.use(['table'],function(){
				var table = layui.table;
				//第一个实例
				  table.render({
					elem: '#list'
					,height: '300'
					,url: '' //数据接口
					,page: true //开启分页
					,cols: [[ //表头
					  	{
					  		field: 'xh',
					  		title: '序号',
					  		width: 80,
					  		align: 'center',
					  		templet: function(d) {
					  			return d.LAY_INDEX;
					  		}
					  	}, {
					  		field: 'name',
					  		title: '计划名称',
					  		align: 'center'
					  	}, {
					  		field: 'cycle',
					  		title: '巡检周期',
					  		align: 'center'
					  	}, {
					  		field: 'startTime',
					  		title: '开始时间',
					  		align: 'center'
					  	}, {
					  		field: 'endTime',
					  		title: '结束时间',
					  		align: 'center'
					  	}, {
					  		field: 'position',
					  		title: '巡检位置',
					  		align: 'center'
					  	}, {
					  		field: 'manager',
					  		title: '巡检人',
					  		align: 'center'
					  	}, {
					  		field: 'state',
					  		title: '巡检情况',
					  		align: 'center',
							templet:function(d){
								if(d.state == 0){
									return `<span class="layui-btn layui-btn-warm layui-btn-xs">未开始</span>`
								}else if(d.state == 1){
									return `<span class="layui-btn layui-btn-danger layui-btn-xs">未巡检</span>`
								}else{
									return `<span class="layui-btn layui-btn-normal layui-btn-xs">已巡检</span>`
								}
							}
					  	}, {
					  		field: 'opt',
					  		title: '操作',
					  		width: 160,
					  		align: 'center',
					  		templet: function(d) {
					  			return `<a href="javascript:;" class="layui-btn layui-btn-normal layui-btn-xs"><i class="layui-icon layui-icon-edit"></i>编辑</a>
					  					  &nbsp;<a href="javascript:;" class="layui-btn layui-btn-danger layui-btn-xs"><i class="layui-icon layui-icon-delete"></i>删除</a>`
					  		}
					  	}
					]]
					,data:data
				  });
			})
			$(function(){
				$("#addBtn").click(function(){
					top.tabAdd('机房新增','jifang_add','pages/jifang/jifang_add.html',true,true);
					
				})
			})
		</script>
	</body>
</html>
